<template>
    <!-- 根div -->
    <div class="login_container">
        <!-- 登陆表单 -->
        <div class="login_form">
            <h3 class="title">云端ERP</h3>
            <el-form ref="formRef" :model="loginForm" :rules="rules">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
              
                <el-form-item>
                    <!-- 按钮 -->
                    <el-button style="width: 100%;" type="primary" @click="handleLogin">登陆</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>

</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { login } from "../api/user/index.js"
import { useRouter } from "vue-router";

const router = useRouter()
const formRef = ref()

const loginForm = ref({})
const rules = reactive({

    username: [
        { required: true, message: '用户名不可为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不可为空', trigger: 'blur' },
        { min: 3, max: 8, message: '密码长度在3~8之间', trigger: 'blur' },
    ],

})

// 登录
function handleLogin() {
    formRef.value.validate(async (valid) => {
        if (valid) {

            // 清空token
            sessionStorage.clear()
            localStorage.clear()
            login(loginForm.value).then(res => {

                console.log(res.data.token)
                if (res.data.code == 200) {
					localStorage.setItem("token",res.data.token)
                    router.push("/index")
                }
            })
        }
    })
}


</script>

<style lang="scss" scoped>
.login_container {
    // 背景图C:\Users\86131\Desktop\vite_project\src\assets\image.png
    background-image: url('src/assets/image.png');
    background-size: 100%;
    height: 100vh;
    display: flex;
    justify-content: flex-end;

    .login_form {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        //设置换行
        flex-direction: column;
        margin-top: 15%;
        margin-right: 35%;
        width: 30%;
        height: 35%;
        background-color: #fff;

        .title {
            margin-bottom: 20px;
        }

        .rememberMe {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .forgetpass {
                cursor: pointer;
            }
        }

        // 其他登录
        .other_login {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;

            .other_login_item {
                margin-right: 60px;
                cursor: pointer;
            }
        }

    }
}

// 设置form的宽度
.el-form {
    width: 60%;
}

.el-form-item {
    width: 100%;
}
</style>